<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #F3EFEE;
        }

        .aui-active .aui-bar-tab-label {
            color: #f5a51c
        }

        .login {
            height: 240px;
            background-image: -webkit-linear-gradient(0deg, #f5c674, #ed824c);
            /*background-image: url(../../image/personal_bkg.jpg);background-repeat: no-repeat; background-size: cover;*/
            position: relative;
        }

        .login .personal_logo {
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            margin: 0 auto 9px;
            /*position: absolute; top: 60px; left: 20px;*/
        }

        .login .userinfo {
            position: absolute;
            top: 60px;
            text-align: center;
            left: 0;
            right: 0;
        }

        .login .userinfo .title {
            font-size: 0.8rem;
            color: #fff;
        }
        /* 设置条目 */

        .item {
            height: 3rem;
            line-height: 3rem;
            padding-left: 0.7rem;
            background-color: #fff;
        }

        .item_ico {
            float: left;
            width: 2.3rem;
            padding: 0.7rem 0.7rem 0.7rem 0;
        }

        .item_arrow {
            float: right;
            width: 1.5rem;
            padding: 1rem 0.7rem 1rem 0;
        }

        .item span {
            font-size: 0.7rem;
        }

        [v-cloak] {
            display: none;
        }

        .nickname_main {
            width: 90vw;
            margin: 0 auto;
        }

        .nickname_input_name {
            border-bottom: 2px solid red !important;
            font-size: 0.8rem;
        }
    </style>
</head>

<body>
    <div id="app">
        <header id="header_top" class="aui-bar aui-bar-nav aui-bar-light">
            <a class="aui-pull-left" onclick="goback()">
                <span class="aui-iconfont aui-icon-left"></span>
            </a>
            <div class="aui-title">我的昵称</div>
            <div style="margin-right:-72%;color:#f23030" @click='changeName'>保存</div>

        </header>
        <div class="aui-refresh-content nickname_main">
            <input type="text" name="" class="nickname_input_name" v-model="userName">
            <div style="color:#999;font-size:0.6rem;margin-top:5px">注意：与生意帮业务或买家品牌有冲突的昵称，生意帮将有权收回</div>
            <div>
            </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    function goback() {
        api.closeWin();
    }

    function openWinInfo(type) {
        api.openWin({
            name: 'type',
            url: './userInfo.html',
            pageParam: {
                name: 'test'
            }
        });

    }


    apiready = function() {
        // setRefresh()
    };


    //刷新
    function setRefresh() {
        var pullRefresh = new auiPullToRefresh({
            container: document.querySelector('.aui-refresh-content'),
            triggerDistance: 100
        }, function(ret) {

            if (ret.status == "success") {
                setTimeout(function() {
                    pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                }, 1500)
            }
        })
    }
</script>
<script>
    apiready = function() {
        new Vue({
            el: '#app',
            data: {
                userName: ''
            },
            created: function() {
                var _this = this;
                api.ajax({
                    url: window.Url.Freeucenter_userInfo,
                    method: 'post',
                    data: {
                        values: {
                            token: $api.getStorage('token'),
                        }
                    }
                }, function(ret, err) {
                    if (ret) {
                        _this.userName = ret.data.username;
                        if (ret.re != 1) {
                            alert(ret.info);
                        }

                    } else {
                        console.log(JSON.stringify(err));
                    }
                });
            },
            methods: {
                changeName:function() {
                    var _this = this;
                    api.ajax({
                        url: window.Url.Freeucenter_setUserInfo,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('token'),
                                username: _this.userName,

                            }

                        }
                    }, function(ret, err) {
                        if (ret.re == 1) {
                            alert(ret.info);
                            api.execScript({
                                name: 'person',
                                frameName: 'personMsg_list',
                                script: 'window.location.reload()'
                            })
                            api.closeWin({
                                name: 'nickname_list'
                            });
                            //alert( JSON.stringify( ret ) );
                        } else {
                            alert(ret.info);
                            //  alert( JSON.stringify( err ) );
                        }
                    });

                }

            },
            mounted:function() {

            }

        })
    };
</script>

</html>
